/*
 * @Author: wwssaabb
 * @Date: 2021-07-21 15:09:55
 * @LastEditTime: 2021-07-22 09:35:52
 * @FilePath: \demo\react_demo\react_stagin_demo\src_todolist_demo\App.js
 */

import React, { Component } from 'react'

import Header from './components/Header/index'
import List from './components/List/index'
import Footer from './components/Footer/index'

import './App.css'

export default class App extends Component {
  state={
    todos:[
      {id:'001',content:'网络上你重拳出击，现实中你蹬着三轮卖鸡',isDone:true},
      {id:'002',content:'网络上你重拳出击，现实中你蹬着三轮卖鸡',isDone:false},
      {id:'003',content:'网络上你重拳出击，现实中你蹬着三轮卖鸡',isDone:false},
      {id:'004',content:'网络上你重拳出击，现实中你蹬着三轮卖鸡',isDone:false},
      {id:'005',content:'网络上你重拳出击，现实中你蹬着三轮卖鸡',isDone:false},
      {id:'006',content:'网络上你重拳出击，现实中你蹬着三轮卖鸡',isDone:true},
      {id:'007',content:'网络上你重拳出击，现实中你蹬着三轮卖鸡',isDone:true},
    ],
    isSelectAll:false
  }

  addTodo=(item)=>{
    const { todos } = this.state
    this.setState({todos:[item,...todos]})
  }

  changeTodo=(id,isDone)=>{
    const { todos } = this.state
    todos[todos.findIndex(i=>i.id===id)].isDone=isDone
    this.setState({todos,isSelectAll:todos.some(i=>!i.isDone)?false:true})
  }

  deleteItem=(id)=>{
    const { todos } = this.state
    if(window.confirm('确定删除吗？')){
      todos.splice([todos.findIndex(i=>i.id===id)],1)
      this.setState({todos})
    }    
  }

  selectAll=()=>{
    let { todos } = this.state
    let isAllDone=todos.some(i=>!i.isDone)
    todos=todos.map(i=>{
      isAllDone?i.isDone=true:i.isDone=!i.isDone
      return i
    })
    this.setState({todos,isSelectAll:todos.some(i=>!i.isDone)?false:true})
  }

  deleteAllComplate=()=>{
    this.setState({todos:this.state.todos.filter(i=>!i.isDone)})
  }

  render() {
    const { todos,isSelectAll } = this.state
    let total =todos.length
    let count =todos.filter(i=>i.isDone).length
    return (
      <div className='app'>
        <h1>Todo List</h1>
        <Header todos={todos} addTodo={this.addTodo}/>
        <List todos={todos} changeTodo={this.changeTodo} deleteItem={this.deleteItem}/>
        <Footer isSelectAll={isSelectAll} count={count} total={total} selectAll={this.selectAll} deleteAllComplate={this.deleteAllComplate}/>
      </div>
    )
  }
}
